<template>
  <div class="app-container">
    <el-card>
      <div class="ft-14">
        <el-alert type="warning">
          <p>
            批量发货目前仅支持快递订单，暂不支持自提订单和同城配送方式的订单，提高操作发货的成功率:
          </p>
          <p class="mt-10">1、按模板要求填写发货信息，注意运单号不要写成E+22科学计数法;</p>
          <p class="mt-10">2、在发货48小时且订单状态出于待收货订单状态下，可及时修改物流。</p>
        </el-alert>
      </div>

      <el-button class="mt-20 mb-20" type="primary" @click="dialogVisible = true"
        >批量发货</el-button
      >

      <SearchForm
        v-model="formOption.data"
        :form-option="formOption"
        :show-btn="true"
        :btn-list="btnList"
      />

      <PageTable :data="dataSource" :columns="columns" />
      <Pagination
        v-show="total > 0"
        :total="total"
        :pageNo.sync="listQuery.pageNo"
        :pageSize.sync="listQuery.pageSize"
        @pagination="getBatchList"
      />
    </el-card>

    <!-- 批量发货 -->
    <OrderBatchPopup
      v-if="dialogVisible"
      :dialogVisible.sync="dialogVisible"
      @update="getBatchList"
    />

    <!-- 修改物流 -->
    <OrderShipPopup
      :dialogVisible.sync="shipDialogVisible"
      :row-data="rowData"
      v-if="shipDialogVisible"
      @update="getBatchList"
    />
  </div>
</template>

<script>
import { ORDER_STATUS } from '@/enum/order'
import { ORDER_SELECT_STATUS } from '@/enum/order'
import OrderShipPopup from '../components/OrderShipPopup.vue'
import OrderBatchPopup from '../components/OrderBatchPopup.vue'
export default {
  name: 'BatchShip',
  components: {
    OrderShipPopup,
    OrderBatchPopup
  },
  props: {},
  data() {
    return {
      formOption: {
        data: {
          orderStatus: ''
        },
        items: [
          {
            type: 'datetimerange',
            label: '时间',
            value: 'time',
            valueFormat: 'yyyy-MM-dd HH:mm:ss'
          },
          {
            type: 'select',
            label: '状态',
            value: 'orderStatus',
            selectList: ORDER_SELECT_STATUS
          }
        ]
      },
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      btnList: [
        {
          type: 'primary',
          label: '筛选',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.getBatchList()
          }
        },
        {
          label: '重置',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.formOption.data = {
              orderStatus: ''
            }
            this.getBatchList()
          }
        }
      ],
      columns: [
        {
          label: '订单编号',
          render: (h, { row }) => {
            return <div style="color: #409eff">{row.orderNo}</div>
          }
        },
        {
          prop: 'updatedTime',
          label: '操作时间'
        },
        {
          prop: 'createdUser',
          label: '操作人'
        },
        {
          label: '订单状态',
          render: (h, { row }) => {
            // 订单状态
            let orderStatusText = () => {
              if (row.orderStatus === 31 && row.finishFlag) {
                return '已完成'
              } else if (row.orderStatus === 31 && !row.finishFlag) {
                return '已评价'
              } else {
                return ORDER_STATUS[row.orderStatus]
              }
            }
            return <div>{orderStatusText()}</div>
          }
        },
        {
          prop: 'companyName',
          label: '快递公司'
        },
        {
          prop: 'expressNo',
          label: '快递单号'
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                {row.mayUpdateAddress && row.orderStatus === 20 ? (
                  <el-button type="text" onClick={() => this.shipHandle(row)}>
                    修改物流
                  </el-button>
                ) : (
                  ''
                )}
              </div>
            )
          }
        }
      ],
      rowData: {},
      dataSource: [],
      dialogVisible: false,
      shipDialogVisible: false
    }
  },
  created() {
    this.getBatchList()
  },
  mounted() {},
  methods: {
    // 获取发货列表
    async getBatchList() {
      const params = {
        ...this.listQuery
      }
      const { orderStatus, time } = this.formOption.data
      if (orderStatus) params.orderStatus = orderStatus
      if (time) params.startTime = time[0]
      if (time) params.endTime = time[1]
      const {
        data: { records, total }
      } = await this.$http.order.orderApi.getBranchList({ params })
      this.dataSource = records
      this.total = total
    },
    // 修改物流
    shipHandle(row) {
      this.shipDialogVisible = true
      this.rowData = {
        type: 'update',
        orderNo: row.orderNo,
        detailList: row.detailList,
        expressType: row.expressType,
        expressIdList: row.expressIdList
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
